<template>
  <div>
    <div ref="legend" style="width:600px;height: 400px;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  mounted () {
    this.setLegend()
  },
  methods: {

    setLegend () {
      // console.log(data);
      const obj = echarts.init(this.$refs.legend)
      // 给初始化好的对象,配置选
      const option = {
        title: {
          text: "标题"
        },
        // 网格,柱状体,折线图,散点图,和父类有等比例放大的效果
        grid: {
          // 控制显示的
          show: true,
          borderWidth: 10,
          // 设置背景的
          backgroundColor: "#aaa",
          shadowBlur: 3,
          shadowColor: "rgba(0,0,0,0.2)",
          shadowOffsetX: 10,
          shadowOffsetY: 10,
          // 位置
          left: '20%',
          top: 100,
          // 宽高
          width: 300,
          height: 300,
          // 长|宽是否包含刻度
          containLabel: true
        },
        tooltip: {
          show: true
        },
        // 指明当前的数据是什么类型的
        legend: {
          // 普通的图例,scroll
          type: 'plain'
        },
        // 柱状图
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        // 系列,系列里边有多个数据
        series: [
          {
            name: '销--量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          },
          {
            name: '利润',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }

        ]
      }
      obj.setOption(option)
    }
  }
}
</script>

<style lang="less" scoped></style>
